<template>
  <div class="crypto-container">
    <el-card class="crypto-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <h2>加密/解密工具</h2>
        </div>
      </template>

      <el-form ref="cryptoForm" :model="formData" label-position="top">
        <el-form-item label="操作类型" prop="action" required>
          <el-radio-group v-model="formData.action">
            <el-radio-button label="encrypt">加密</el-radio-button>
            <el-radio-button label="decrypt">解密</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="文本内容" prop="text" required>
          <el-input
            v-model="formData.text"
            type="textarea"
            :rows="4"
            placeholder="请输入要加密或解密的文本"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password" required>
          <el-input
            v-model="formData.password"
            type="password"
            placeholder="请输入加密/解密密码"
            show-password
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button 
            type="primary" 
            @click="submitForm" 
            :loading="loading"
            :disabled="!formValid"
          >
            {{ formData.action === 'encrypt' ? '加密' : '解密' }}
          </el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

      <el-divider v-if="result">结果</el-divider>
      
      <div v-if="result" class="result-container">
        <el-alert 
          :title="formData.action === 'encrypt' ? '加密结果' : '解密结果'" 
          :type="formData.action === 'encrypt' ? 'success' : 'info'"
          show-icon
          :closable="false"
        />
        <div class="result-content">
          <pre>{{ result }}</pre>
        </div>
        <el-button 
          type="primary" 
          plain 
          @click="copyToClipboard"
          :icon="copied ? 'el-icon-check' : 'el-icon-document-copy'"
        >
          {{ copied ? '已复制' : '复制结果' }}
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

// 表单数据
const formData = ref({
  text: '',
  password: '',
  action: 'encrypt'
});

// 加载状态
const loading = ref(false);

// 结果数据
const result = ref('');

// 复制状态
const copied = ref(false);

// 计算属性：表单是否有效
const formValid = computed(() => {
  return formData.value.text.trim() !== '' && formData.value.password.trim() !== '';
});

// 提交表单
const submitForm = async () => {
  if (!formValid.value) {
    ElMessage.warning('请填写所有必填字段');
    return;
  }

  try {
    loading.value = true;
    
    // 发送请求到后端API
    const response = await axios.post(
      'http://127.0.0.1:8000/crypto_api/crypto', 
      formData.value,
      {
        headers: {
          'Content-Type': 'application/json'
        }
      }
    );
    
    // 处理响应
    if (response.data.result) {
      result.value = response.data.result;
      ElMessage.success('操作成功');
    } else {
      ElMessage.error('操作失败：未返回结果');
    }
  } catch (error) {
    console.error('API请求错误:', error);
    
    if (error.response && error.response.data && error.response.data.error) {
      ElMessage.error(`操作失败：${error.response.data.error}`);
    } else {
      ElMessage.error('操作失败：服务器错误');
    }
    
    result.value = '';
  } finally {
    loading.value = false;
  }
};

// 重置表单
const resetForm = () => {
  formData.value = {
    text: '',
    password: '',
    action: 'encrypt'
  };
  result.value = '';
  copied.value = false;
};

// 复制结果到剪贴板
const copyToClipboard = () => {
  if (!result.value) return;
  
  navigator.clipboard.writeText(result.value)
    .then(() => {
      copied.value = true;
      ElMessage.success('结果已复制到剪贴板');
      setTimeout(() => {
        copied.value = false;
      }, 2000);
    })
    .catch(err => {
      console.error('复制失败:', err);
      ElMessage.error('复制失败');
    });
};
</script>

<style scoped>
.crypto-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

.crypto-card {
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-container {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.result-content {
  margin: 15px 0;
  padding: 15px;
  background-color: white;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow-x: auto;
}

.result-content pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.el-divider {
  margin: 25px 0;
}
</style>